<template>
	<view :style="viewColor">
		<view class="header">
			
			<!-- <view class='search-input'>
				<text class='iconfont icon-sousuo'></text>
				<input placeholder='搜索'
					confirm-type='search' name="search" :value='keyword'
					@confirm="searchSubmit">
				</input>
			</view> -->
			
			<!-- <view class="iconfont icon-shezhi" @click="openSetting()"></view> -->
			<view><text style="font-size: larger; font-weight: bold;">未读</text> <text style="padding-left: 4rpx;">({{total_unread}})</text></view>
			
			<view class="iconfont icon-qingkonghuancun" @click="clearUnread()"><text style="padding-left: 4rpx;">全部已读</text></view>
			
		</view>
		
		<view class="header-placeholder"></view>
		
		<!-- <scroll-view scroll-x="true">
			<view class="tab-box">
				<view :class="{on: curTab==index}" v-for="(item, index) in tabItems" :key="index" @click="onTapTab(index)">
					<text class="title">{{item.title}}</text>
					<text v-if="item.unread>0" class="iconnum">{{item.unread}}</text>
				</view>
			</view>
		</scroll-view> -->
		
		<!-- scroll-y scroll-with-animation @scrolltolower="onScrollToLower" lower-threshold="2"     ScrollView加载更多 by cmh -->
		<scroll-view style="padding-top:30rpx;" scroll-y scroll-with-animation @scrolltolower="onScrollToLower" lower-threshold="2">
			<view class="msg-group" v-for="(item, index) in msgGroups" :key="index" @click="onTapMsgGroup(item)">
				<image class="icon" :src="item.mer_avatar"></image>
				<view class="mid">
					<view class="name">{{item.mer_name}}</view>
					<view class="more">
						<view class="desc">{{item.msg_brief}}</view>
						<view class="time">{{item.create_time}}</view>
					</view>
				</view>
				<view style="flex:1"></view>
				<view v-if="item.unread_count>0" class="unread">{{item.unread_count}}</view>
			</view>
			
			
			<!-- begin ScrollView加载更多 by cmh -->
			<view class="loading_text">
				<text>{{loadMoreText}}</text>
			</view>
			<!-- end ScrollView加载更多 by cmh -->
		</scroll-view>

	</view>
</template>

<script>
import { storeMerchantList, getGeocoder, loadMsgHome, clearUnreadMsg } from '@/api/store.js';

// begin 自动登录 by cmh
import { mapGetters } from "vuex";
import { configMap } from '@/utils';
import { toLogin } from '@/libs/login.js';
// end 自动登录 by cmh
const app = getApp();

	export default {
		data() {
			return {
				curTab: 0,
				tabItems: [
					{title:'所有', icon:'', unread: 19},
					{title:'鱼讯', icon:'', unread: 6},
					{title:'朋友', icon:''},
					{title:'粉丝', icon:'', unread: 10},
					{title:'赞与收藏', icon:''},
				],
				
				msgGroups: [
					//{icon:"https://www.zhidiaotianxia.com/uploads/def/20230517/6b2955a9c9480fec05e262382ed89adc.png", name:'系统通知', desc:'用户协议...', time:'08:08', unread: 0},
					{mer_avatar:"https://www.zhidiaotianxia.com/uploads/def/20240812/2118e9677aef2c0ed4c4ba8bda5c1d06.jpg", mer_name:'爱钓', msg_brief:'群主发布了鱼汛...', create_time:'昨天 17:15', unread_count: 1, mer_id:77},
				],
				
				total_unread: 0,


				// begin ScrollView加载更多 by cmh
				page: 1,
				limit: 10,
				pageCount: 0,
				loadMoreText: "上拉加载更多",
				// end ScrollView加载更多 by cmh
				
			}
		},
		// begin 自动登录 by cmh
		computed: configMap({
				margin_ico_switch: 0,
				margin_ico: '',
			}, mapGetters(['isLogin','uid','viewColor','keyColor'])),
		// end 自动登录 by cmh
		onLoad(options) {
			this.msgGroups = [];
		},
		onShow() {
			// begin 自动登录 by cmh
			if (this.isLogin === false) {
				toLogin();
				return;
			}
			// end 自动登录 by cmh
			this.page = 1;
			this.loadMsgGroups();
		},
		methods: {
			onTapTab(index) {
				this.curTab = index;
			},
			
			loadMsgGroups() {
				uni.showLoading({
					title: '数据加载中',
				});
				let param = {
					page: this.page,
					limit: this.limit
				}
				loadMsgHome(this.uid, param).then(res => {
					uni.hideLoading();
					//console.log("loadMsgHome| res:", res);
					this.pageCount = res.data.pageCount;
					this.msgGroups = res.data.rows;
					this.total_unread = res.data.total_unread;
					
					// begin ScrollView加载更多 by cmh
					this.loadMoreText = (this.page < this.pageCount) ? "上拉加载更多" : "~ 没有更多数据了 ~";
					// end ScrollView加载更多 by cmh
					
					++this.page;
				}).catch(err=>{
					uni.hideLoading();
				})
			},
			// end 查找商铺列表
			
			// begin ScrollView加载更多 by cmh
			onScrollToLower() { // ScrollView滚动到底部
				if(this.page >= this.pageCount)
					return;
				this.loadMoreText = "加载中...";
				clearTimeout(this.loadMoreTimer);
				this.loadMoreTimer = setTimeout(()=>{
					console.log("msg_home|onScrollToLower, loadMsgGroups ..., page=%o, pageCount=%o", this.page + 1, this.pageCount);
					this.loadMsgGroups();
				}, 1000);
			},
			// end ScrollView加载更多 by cmh

			onTapMsgGroup(item) {
				//console.log("onTapMsgGroup| item:", item);
				// if(item.type == 1) {
					app.globalData.mer_msg_item = item;
					uni.navigateTo({
						url: '/pages/msg/merchant/publish?mer_id='+app.globalData.mer_msg_item.mer_id+'&uid='+this.uid
					})
				// }
			},

			clearUnread() {
				clearUnreadMsg(this.uid).then(res=>{
					this.total_unread = 0;
					this.msgGroups.forEach(item=>item.unread_count=0);
				}).catch(err=>{})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		top: 0;
		
		color: white;
		background-color: var(--view-theme);
		// background-color: #f0f0f0;
		padding: 10rpx 30rpx;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}
	
	.search-input {
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
		text {
			margin-right: 8rpx;
		}
	}
	
	.header-placeholder {
		height: 80rpx;
	}
	
	.tab-box {
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
	
		view {
			padding: 30rpx 40rpx;
			position: relative;
				
			.title {
				position: relative;
				top: 5px;
			}
			.iconnum {
				height: 32rpx;
				width: 32rpx;
				border-radius: 32rpx;
				line-height: 32rpx;
				text-align: center;
				background-color: red;
				color: #fff;
				position: absolute;
				right: 15rpx;
				top: 20rpx;
				font-size: 8px;
			}
		}
		
		view.on {
			color: #905EFF;
			border-bottom: 1rpx solid #905EFF;
		}
	}
	
	.msg-group {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: white;
		border-bottom: solid 1px #f0f0f0;
		
		.icon {
			width: 80rpx;
			height: 80rpx;
			
			margin-right: 30rpx;
		}
		
		.mid {
			.name {
				font-size: medium;
				font-weight: bolder;
			}
			
			.more {
				margin-top: 4rpx;
				display: flex;
				color: #999;
				
				.desc {
					margin-right: 20rpx;
				}
				
			}
		}
		
		.unread {
			width: 32rpx;
			height: 32rpx;
			border-radius: 32rpx;
			text-align: center;
			line-height: 32rpx;
			background-color: red;
			color: white;
			font-size: x-small;
		}
	}

	// begin ScrollView加载更多 by cmh
	.loading_text {
		display: flex;
		justify-content: center;
		font-size: 20upx;
		margin: 48upx 0 60upx;
		color: #979797;
	}
	// end ScrollView加载更多 by cmh
</style>
